<template>
  <div class="content">
    <div class="main">
      <div class="title">安全登陆</div>
      <cube-input v-model="email" class="row" :clearable="clearable" placeholder="请输入邮箱"></cube-input>
      <cube-input v-model="password" class="row" :type="passwordType" placeholder="请输入密码" :eye="eye"></cube-input>
      <cube-button class="row" :primary="true" @click="login">登陆</cube-button>
      <div class="word">
        <div><router-link to="/forget">忘记密码?</router-link></div>
        <div><router-link to="/reg">用户注册</router-link></div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { postData } from '../js/axios'
export default {
  name: 'reg',
  data () {
    return {
      email: '',
      password: '',
      passwordType: 'password',
      clearable: {
        visible: true,
        blurHidden: true
      },
      eye: {
        open: false,
        reverse: false
      }
    }
  },
  methods: {
    login: function () {
      console.log(this.email, this.password)
      let Obj = {}
      Obj.email = this.email
      Obj.password = this.password
      postData('http://account-server.localhost/index.php?s=/index/index/login', Obj)
        .then(res => {
          console.log(res)
          if (res.code === 'ok') {
            store.commit('setUserInfo', res.userinfo)
            this.showToast(
              '登陆成功',
              'correct',
              function (self) {
                self.$router.push('/ucenter')
              }
            )
          } else {
            this.showToast('登陆失败', 'warn')
          }
        })
    },
    showToast (msg, type, callback = function () {}) {
      let self = this
      const toast = this.$createToast({
        txt: msg,
        time: 800,
        type: type,
        onTimeout: () => {
          callback(self)
        }
      })
      toast.show()
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  width 100%
  position fixed
  top 0
  bottom 0
  z-index 10
  background #fff
  .main
    width 90%;
    margin 0 auto;
    .title
      margin-top 25px;
      color #777;
      width 100%;
    .row
      width 100%;
      margin-top 15px;
    .word
      width 100%;
      display flex;
      justify-content space-between
      color #777
      font-size 14px
      padding-top 15px
      a:line
        color #777;
</style>
